<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户信息修改</title>
    <link th:href="@{/css/bootstrap.css}" rel='stylesheet' type='text/css' />
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- Custom Theme files -->
    <link th:href="@{/css/style.css}" rel='stylesheet' type='text/css' />
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Hotel Deluxe Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!--webfont-->
    <script type="text/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/login.js}"></script>
    <script th:src="@{/js/jquery.easydropdown.js}"></script>
    <!--Animation-->
    <script th:src="@{/js/wow.min.js}"></script>
    <link th:href="@{/css/animate.css}" rel='stylesheet' type='text/css' />
    <link rel="stylesheet" th:href="@{/bower_components/font-awesome/css/font-awesome.min.css}">
    <!-- Ionicons -->
    <link rel="stylesheet" th:href="@{/bower_components/Ionicons/css/ionicons.min.css}">
    <!-- DataTables -->
    <link rel="stylesheet" th:href="@{/dist/css/AdminLTE.min.css}">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" th:href="@{/dist/css/skins/_all-skins.min.css}">
    <script>
        new WOW().init();
    </script>
</head>
<body>
<div class="header">
    <div class="col-sm-8 header-left">
        <div class="logo">
            <a href="index.html"><img th:src="@{/images/logo.png}" alt=""/></a>
        </div>
        <div class="menu">
            <a class="toggleMenu" href="#"><img th:src="@{/images/nav.png}" alt="" /></a>
            <ul class="nav" id="nav">
                <li><a th:href="@{/toUserLogin}">首页</a></li>
                <!--<li><a th:href="@{/toRooms}">房间</a></li>-->
                <li><a href="news.html">新闻</a></li>
                <li><a href="/userOrder/userorder">我的订单</a></li>
                <li><a th:href="@{/EditUser/allHotel}">旗下酒店</a></li>
                <li class="active"><a>个人中心</a></li>
                <li><a href="404.html">社区</a></li>
                <div class="clearfix"></div>
            </ul>
            <script type="text/javascript" th:src="@{/js/responsive-nav.js}"></script>
        </div>
        <!-- start search-->
        <div class="search-box">
            <div id="sb-search" class="sb-search">
                <form>
                    <input class="sb-search-input" placeholder="请输入你要查询的关键字" type="search" name="search" id="search">
                    <input class="sb-search-submit" type="submit" value="">
                    <span class="sb-icon-search"> </span>
                </form>
            </div>
        </div>
        <!--search-scripts-->
        <script th:src="@{/js/classie.js}"></script>
        <script th:src="@{/js/uisearch.js}"></script>
        <script>
            new UISearch( document.getElementById( 'sb-search' ) );
        </script>
        <!--search-scripts-->
        <div class="clearfix"></div>
    </div>
    <div class="col-sm-4 header_right">
        <div id="loginContainer"><a href="#" id="loginButton"><img th:src="@{/images/login.png}">
            <span th:if="${session.user != null}" th:text="${session.user.userName}">登录</span>
            <span th:if="${session.user == null}" >登录</span>
        </a>
            <a th:href="@{/userLogin/logout}"  style="float: right"><img th:src="@{/images/login.png}"><span>注销</span></a>
            <div id="loginBox">
                <form id="loginForm" th:action="@{/userLogin/login}" method="post">
                    <fieldset id="body">
                        <fieldset>
                            <label for="userName">用户名</label>
                            <input type="text" name="userName" id="userName">
                        </fieldset>
                        <fieldset>
                            <label for="password">密码</label>
                            <input type="password" name="userPassword" id="password">
                        </fieldset>
                        <input type="submit" id="login" value="登录">
                        <input type="submit" id="regist" value="注册" ><a href="regist.html"></a>
                        <label for="checkbox"><input type="checkbox" id="checkbox"> <i>记住密码</i></label>
                    </fieldset>
                    <span><a href="#">忘记密码?</a></span>
                </form>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
</div>
<div class="content_top">
    <div class="container">
        <div class="col-md-4 bottom_nav">
            <div class="content_menu">
                <ul>
                    <li class="active"><a href="#">修改个人信息</a></li>
                    <li><a th:href="@{/EditUser/find}">我的收藏</a></li>

                </ul>
            </div>
        </div>
    </div>
</div>
<section class="content">
    <div class="row">
        <!-- left column -->
        <div class="col-md-12" style="padding-left: 40%;
            padding-right: 37%">

            <!-- general form elements -->
            <div class="box box-primary"
            style="
            border-top: 3px solid #c72275;
            border-left: 3px solid black;
            border-right: 3px solid green;
            border-bottom: 3px solid blue;
                  ">
                <div class="box-header with-border">
                    <h3 class="box-title"style="text-align: center">修改个人信息</h3>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form id="form"  th:action="@{/EditUser/editUser}" method="post">
                    <div class="box-body">
                        <div class="form-group">
                            <label for="userName">用户名</label>
                            <input type="text" class="form-control"  placeholder="输入新的用户名" name="userName" th:value="${user.userName}"
                            style="box-shadow: 5px 5px 5px grey;">
                            <!--<input th:type="text" hidden="hidden" name="userName" th:value="${user.userName}">-->
                        </div>
                        <div class="form-group">
                            <label for="userNumber">手机号码</label>
                            <input type="text" class="form-control" id="userNumber" placeholder="输入新的手机号码" name="userNumber" th:value="${user.userNumber}"
                            style="box-shadow: 5px 5px 5px green">
                            <!--<input th:type="text" hidden="hidden" name="userName" th:value="${user.userName}">-->
                        </div>
                        <div class="form-group">
                            <label  >邮箱地址</label>
                            <input type="text" class="form-control" id="userEmail" placeholder="输入新的邮箱地址" name="userEmail" th:value="${user.userEmail}"
                            style="box-shadow: 5px 5px 5px blue">
                            <!--<input th:type="text" hidden="hidden" name="userName" th:value="${user.userName}">-->
                        </div>

                        <div class="form-group">
                            <label >密码</label>
                            <input type="password" disabled="disabled" id="userPassword" class="form-control"  placeholder="输入新的密码" name="userPassword"  th:value="${user.userPassword}"

                            style="box-shadow: 5px 5px 5px pink">

                            <!--<input th:type="text" hidden="hidden" name="userName" th:value="${user.userName}">-->
                        </div>
                    </div>
                    <!-- /.box-body -->

                    <div class="box-footer"style="padding-left: 45%;">
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </form>

            </div>
            <!-- /.box -->
            <!--<div class="living_bottom" style="float: right">-->
                <!--<div class="container">-->
                    <!--<h2 class="title block-title">我的收藏</h2>-->
                    <!--<div class="col-md-6 post_left wow fadeInLeft" data-wow-delay="0.4s" >-->
                        <!--<div class="mask1"><img th:src="@{/images/pic4.jpg}" alt="image" class="img-responsive zoom-img" style="width: 500px;height: 400px"/></div>-->
                        <!--<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus, sem eget sagittis sagittis, nisl magna sodales eros, ut feugiat velit velit non turpis. Cras eu nibh dapibus justo fringilla   <a href="single.html">More</a></p>-->
                        <!--<div class="divider"></div>-->
                        <!--<p class="field-content">30 Sep 2015</span></p>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        </div>
    </div>
    <!-- /.row -->
</section>

<div class="footer">
    <div class="container">
        <div class="footer_top">
            <h3>订阅我们的通知</h3>
            <form>
		<span>
			<i><img th:src="@{/images/mail.png}" alt=""></i>
		    <input type="text" value="请输入您的邮箱地址" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '请输入您的邮箱地址';}">
		    <label class="btn1 btn2 btn-2 btn-2g"> <input name="submit" type="submit" id="submit" value="订阅"> </label>
		    <div class="clearfix"> </div>
		</span>
            </form>
        </div>
        <div class="clearfix"> </div>
    </div>
</div>

</div>
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/jquery.validate.min.js}"></script>
<script th:src="@{/js/messages_zh.js}"></script>
<script  th:src="@{/js/jquery-1.11.1.min.js}"></script>

<script>

    $.validator.setDefaults({
        submitHandler:function () {
            $('#form').submit();
        }
    })

    jQuery.validator.addMethod("isMobile", function(value, element) {
        var length = value.length;
        var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写手机号码");

    $().ready(function () {
        $('#form').validate({
            rules: {
                userNumber: {
                    required: true,
                    minlength: 11,
                    isMobile: true
                }

            },
            messages: {

                userNumber: {
                    required: "请输入正确的手机号码",
                    minlength: "请输入11位手机号",
                    isMobile: "请输入正确的手机号"
                },

            }
<script th:src="@{/bower_components/jquery/dist/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
<!-- DataTables -->
<script th:src="@{/bower_components/datatables.net/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js}"></script>
<!-- SlimScroll -->
<script th:src="@{/bower_components/jquery-slimscroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script th:src="@{/bower_components/fastclick/lib/fastclick.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/dist/js/adminlte.min.js}"></script>
<!-- AdminLTE for demo purposes -->
<script th:src="@{/dist/js/demo.js}"></script>
<script th:src="@{/bower_components/select2/dist/js/select2.full.min.js}"></script>
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/jquery.validate.min.js}"></script>
<script th:src="@{/js/messages_zh.js}"></script>
<script>


    $().ready(function() {
        $.validator.setDefaults({
            submitHandler:function () {
                $('#form').submit();
            }
        })

        jQuery.validator.addMethod("isMobile", function(value, element) {
            var length = value.length;
            var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写手机号码");
// 在键盘按下并释放及提交后验证提交表单
        $("#form").validate({
            rules: {

                userPassword: {
                    required: true,
                    minlength: 5
                },

                userEmail: {
                    required: true,
                    email: true
                },
                userNumber:{
                    required:true,
                    minlength:11,
                    maxlength:11,
                    isMobile : true
                }

            },
            messages: {

                userPassword: {
                    required: "请输入密码",
                    minlength: "密码长度不能小于 5 个字母"
                },

                userEmail: "请输入一个正确的邮箱",
                userNumber:{
                    required:"请输入正确的手机号码",
                    minlength:"请输入11位手机号",
                    isMobile:"请输入正确的手机号"
                }

            }
        });
    });

</script>

        })

    })
</script>>
</body>
</html>